import React from 'react'
import classnames from 'classnames'

export default function View({ state }) {
  const { val, panels } = state
  return (
    <div className="component-app">
      <div className="component-display">
        <div className="js_num">{val}</div>
      </div>
      <div className="component-button-panel">
        {[[0, 4], [4, 8], [8, 12], [12, 16], [16]].map((value, index) => (
          <div key={index}>
            {panels.slice(...value).map(createPanel)}
          </div>
        ))}
      </div>
    </div>
  )
}

const createPanel = (value, index) => {
  const { text, extraClass } = value
  return (
    <div
      key={index}
      className={classnames('component-button js_panel_item', {
        [extraClass]: extraClass
      })}
      data-payload={JSON.stringify(value)}
    >
      <button>{text}</button>
    </div>
  )
}
